<template>
    <a-layout class="dataview-layout">
        <a-layout-sider>
            <div class="add-button-wrapper px-4 py-3 border-b border-gray-100">
                <a-button class="mb-3 flex items-center justify-center gap-2" type="primary" block size="large" @click="handleAddScreen">
                    <plus-outlined />
                    创建大屏
                </a-button>
                <div class="search-form-wrapper">
                    <a-form
                        :model="state.searchForm"
                        layout="vertical"
                        name="searchForm"
                        autocomplete="off"
                    >
                        <a-form-item
                            name="projectName"
                            class="!mb-0"
                        >
                            <a-input placeholder="请输入项目名查询" allowClear v-model:value.lazy="state.searchForm.projectName" @change="handleSearch" />
                        </a-form-item>
                    </a-form>
                </div>
            </div>
            <a-menu 
                v-model:selectedKeys="state.selectedKeys"  
                v-model:openKeys="state.openKeys" 
                mode="inline" 
                class="custom-menu" 
                @click="handleMenuItemClick"
            >
                <a-sub-menu key="/dataview">
                    <template #title>
                        <span>
                            <user-outlined />
                            <span>项目</span>
                        </span>
                    </template>
                    <a-menu-item key="/dataview/projects">
                        全部项目
                    </a-menu-item>
                    <a-menu-item key="/dataview/template">
                        模板
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout class="right-layout">
            <a-layout-header style="background: #fff; padding: 0 10px;">
                <div class="h-left"></div>
                <div class="h-right">
                    <a-dropdown class="ml-5">
                        <div class="ant-dropdown-link" @click.prevent>
                            {{ userInfoState.userInfos.account }}
                            <DownOutlined />
                        </div>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item @click="handleGoToAdmin">
                                    后台系统
                                </a-menu-item>
                                <a-menu-item @click="handleLogout">
                                    退出登录
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </a-layout-header>
            <a-layout-content class="content">
                <div class="content-wrapper">
                    <router-view v-slot="{ Component }">
                        <transition name="slide-fade" mode="out-in">
                            <component :is="Component" :key="refreshRouterViewKey"></component>
                        </transition>
                    </router-view>
                </div>
            </a-layout-content>
        </a-layout>
        <add-proj-model ref="addProjModelRef"/>
    </a-layout>
</template>

<script lang="ts" setup>
import {
    PieChartOutlined,
    UserOutlined,
    PlusOutlined
} from '@ant-design/icons-vue';
import { ref ,computed, reactive,onMounted, onBeforeMount} from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { useUserInfo } from '@/stores/userInfo'
import { storeToRefs } from 'pinia';
import { apiSysAuthLogoutPost } from '@/api/sys/sysAuth';
import { clearToken, emitter } from '@/utils';
import addProjModel from './components/model/addProjModel.vue';

const addProjModelRef = ref<InstanceType<typeof addProjModel>>()
const userInfoStore= useUserInfo();
const {state:userInfoState} =  storeToRefs(userInfoStore)
const route = useRoute();
const router = useRouter();

const state = reactive({
    selectedKeys:['/dataview/projects'],
    openKeys:['/dataview'],
    searchForm:{
        projectName:''
    }
})

const handleAddScreen = () => {
    addProjModelRef.value?.handleOpen({
        projectName: '',
        remark: '',
        status: 1,        // 默认启用
        isTemplate: 2,    // 默认否
        isPublish: 2      // 默认否
    })
}
const refreshRouterViewKey = computed(()=>{
    return route.path
})
const handleMenuItemClick = (e:any) => {
    const {key} = e
    router.push(key)
}

const handleGoToAdmin = ()=>{
    router.push('/')
}
const handleLogout = async()=>{
    await apiSysAuthLogoutPost()
    clearToken()
    // await stopSignalR()
    window.location.reload()
}

const handleSearch = ()=>{
    emitter.emit('project-search',state.searchForm)
}

const setOpenKeys = ()=>{
    const s1 = route.path.split('/')[1]
    state.openKeys = [`/${s1}`]
}
const setSelectedKeys = ()=>{
    state.selectedKeys = [route.path]
}

onBeforeMount(()=>{
    setOpenKeys()
    setSelectedKeys()
})
</script>

<style scoped>

.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.3s ease;
}

.slide-fade-enter-from {
    opacity: 0;
    transform: translateX(-30px);
}

.slide-fade-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

.dataview-layout {
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

.right-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    background: #fff;
    padding: 0;
    height: 64px;
    line-height: 64px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.content {
    flex: 1;
    padding: 16px;
    overflow: auto;
}

.content-wrapper {
    background: #fff;
    padding: 24px;
    height: 100%;
    border-radius: 4px;
}

.add-button-wrapper {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.add-button-wrapper .ant-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.custom-menu {
    height: calc(100vh - 72px);  /* 减去添加按钮的高度 */
    overflow-y: auto;
    overflow-x: hidden;
}

:deep(.ant-layout-sider) {
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

/* 滚动条样式 */
.custom-menu::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.custom-menu::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.custom-menu::-webkit-scrollbar-track {
    background-color: transparent;
}

.ant-layout-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>